import { useMemo } from "react"

interface propsInterface {
  name:string
  size?:string
  color?:string
  profix?:string
  className?:string
  onClick?:()=>void
}

export default function SvgIcon(props:propsInterface) {
  const size = props.size ?? "24px"
  const color = props.color ?? "#8b96d9"
  const profix = props.profix ?? "icon"

  const iconName = useMemo<string>(()=>{
    return `#${profix}-${props.name}`
  },[profix,props.name])

  const classList = ["icon","active:scale-90 rounded bg-white"]
  if(props.className){
    classList.push(props.className)
  }
  return (
    <svg className={classList.join(" ")} style={{height:size,width:size}} onClick={()=>props.onClick && props.onClick()}>
      <use href={iconName} fill={color} />
    </svg>
  )
}
